<template>
	<view class="padding">
		<view class="row-between">
			<view class="back"><image src="../../static/images/back_blue.png" class="back-icon"></image></view>
				<view class="title">充值</view>
				<view style="width: 40px;"></view>
		</view>
		<view class="box">
			<view class="row-h-center">
				<image class="radio" src="../../static/images/radio_y_blue.png" ></image>
				<view style="margin-left: 5px;">
					默认银行卡
				</view>
			</view>
			<view class="box2">
				<view class="box2-text">
					**** **** **** 5588
				</view>
			</view>
			
			
			<view class="row-h-center" style="margin-top: 30px;">
				<image class="radio" src="../../static/images/radio_y_blue.png" ></image>
				<view style="margin-left: 5px;">
					新银行卡
				</view>
			</view>
			<view class="box3" style="margin-top: 10px;">
				<input placeholder="请输入新银行卡号"></input>
			</view>
			
		</view>
		<view class="box">
			<view class="tip">充值金额</view>
			<view class="box3" style="margin-top: 10px;">
				<input placeholder="请输入充值金额"></input>
			</view>
			<view class="btn">
				充&nbsp;&nbsp;值
			</view>
		</view>
	
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

<style lang="scss" scoped>
	.btn{
		margin-top: 45px;
		margin-bottom: 30px;
		height: 60px;
		border-radius: 50px;
		background-color: rgba(254, 121, 74, 1);
		color: rgba(255, 255, 255, 1);
		font-size: 28px;
		text-align: center;
		font-family: Microsoft Yahei;
		border: 3px solid rgba(79, 79, 79, 1);
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.tip{
		color: rgba(79, 79, 79, 1);
		font-size: 28px;
		text-align: left;
		font-family: HappyZcool-2016;
	}
	
	.box{
		margin-top: 105px;
		padding: 25px 20px;
		line-height: 20px;
		border-radius: 25px;
		background-color: rgba(255, 255, 255, 1);
		text-align: center;
		border: 3px solid rgba(79, 79, 79, 1);
		display: flex;
		flex-direction: column;
	}
	.radio{
		width:15px ;
		height: 15px;
	}
	
	.box2{
		margin-top: 15px;
		line-height: 20px;
		border-radius: 15px;
		background-color: rgba(255, 255, 255, 1);
		color: rgba(16, 16, 16, 1);
		font-size: 14px;
		text-align: center;
		font-family: Arial;
		border: 3px solid rgba(79, 79, 79, 1);
	}
	.box2-text{
		display: flex;
		justify-content: center;
		margin-top: 30px;
		color: rgba(79, 79, 79, 1);
		font-size: 20px;
		text-align: center;
		font-family: HappyZcool-2016;
		margin-bottom: 20px;
	}
	.box3{
		padding-left: 10px;
		height: 50px;
		border-radius: 10px;
		color: rgba(136, 136, 136, 1);
		font-size: 18px;
		text-align: left;
		font-family: Microsoft Yahei;
		border: 3px solid rgba(79, 79, 79, 1);
		display: flex;
		align-items: center;
	}
.back{
	width: 40px;
	height: 40px;
	background-color: rgba(147, 210, 243, 1);
	text-align: center;
	border: 3px solid rgba(79, 79, 79, 1);
	display: flex;
	border-radius: 50%;
	align-items: center;
	justify-content: center;
}
.back-icon{
	width: 19px;
	height: 19px;
}
.title{
	color: rgba(79, 79, 79, 1);
	font-size: 28px;
font-family: HappyZcool-2016;
}
.padding{
		margin-top: 10px;
	margin-left: 20px;
	margin-right: 20px;
}
</style>
